<template>
  <div id="NoCaptch"></div>
</template>

<script>
  import { slidingVerifyApi, sendVerificationCodeApi, sendRegisterVerifyCodeApi } from '@/api'
  import { iscode, getWidth } from '@/utils'

  export default {
    name: 'NoCaptch',
    // 验证成功后，服务端报错（如账号/密码等错误），需要重置滑块
    props: {
      reload: {
        type: Boolean,
        default: false
      },
      phone: String,
      isBundle: {
        type: Boolean,
        default: false
      }
    },
    // 定义属性
    data() {
      return {
        ic: null
      }
    },
    watch: {
      reload: {
        handler(newV) {
          if (newV) {
            this.ic.reset() // 重置
          }
        }
      }
    },
    // 方法集合
    methods: {
      // ------ async ------
      // 验证成功，拿到secret
      async slidingVerify(sessionId, sig, token) {
        let res = await slidingVerifyApi({
          sessionId,
          sig,
          token
        })
        if (iscode(res)) {
          if (this.isBundle) {
            this.sendRegisterVerifyCode(res.result.secret)
          } else {
            this.sendVerificationCode(res.result.secret)
          }
          setTimeout(() => {
            // this.ic.reset();
            this.$emit('resetBundle')
            this.$emit('hiddenCap')
          }, 2300)
        }
      },
      // 获取验证码
      async sendVerificationCode(secret) {
        let res = await sendVerificationCodeApi({
          phone: this.phone,
          secret
        })
        if (iscode(res)) {
          if (getWidth() > 768) {
            this.$message({
              message: res.message,
              iconClass: 'mySuccessIcon',
              customClass: 'mySuccess'
            })
          } else {
            this.$toast(res.message)
          }
          this.$emit('slideCallback', secret)
          if (getWidth() <= 768) {
            setTimeout(() => {
              this.$router.push({
                path: '/getCode',
                query: {
                  phone: this.phone,
                  inviteCode: this.$route.query.inviteCode ?? '',
                  onebuy_code: this.$route.query.onebuy_code ?? '',
                  id: this.$route.query.id,
                  secret
                }
              })
            }, 2300)
          }
        } else {
          setTimeout(() => {
            this.ic.reset()
            this.$emit('hiddenCap')
          }, 2300)
        }
      },
      // 获取绑定验证码
      async sendRegisterVerifyCode(secret) {
        let res = await sendRegisterVerifyCodeApi({
          phone: this.phone,
          secret
        })
        if (iscode(res)) {
          if (getWidth() > 768) {
            this.$message({
              message: res.message,
              iconClass: 'mySuccessIcon',
              customClass: 'mySuccess'
            })
          } else {
            this.$toast(res.message)
          }
          this.$emit('slideCallback', secret)
        } else {
          setTimeout(() => {
            this.ic.reset()
            this.$emit('hiddenCap')
            this.$emit('hiddenCap')
          }, 2300)
        }
      },

      // init
      initNoCaptch() {
        const self = this
        const nc_token = ['CF_APP_1', new Date().getTime(), Math.random()].join(':')
        AWSC.use('ic', function(state, module) {
          self.ic = module.init({
            appkey: 'FFFF0N0000000000AC3A',
            scene: 'ic_register_h5',
            renderTo: 'NoCaptch',
            token: nc_token,
            // 成功
            success: function(data) {
              self.slidingVerify(data.sessionId, data.sig, data.token)
            },
            // 滑动验证失败
            fail: function(failCode) {
              window.console && console.log(failCode)
            },
            // 验证码加载出现异常
            error: function(errorCode) {
              window.console && console.log(errorCode)
            }
          })
        })
      }
    },
    mounted() {
      this.initNoCaptch()
    }
  }
</script>

<style lang="less" scoped>
  #NoCaptch {
    width: 100% !important;
    height: 100% !important;

    // 手动设置宽度
    /deep/#SM_BTN_WRAPPER_1,
    /deep/#SM_BTN_1,
    /deep/#rectMask,
    /deep/#sm-btn-bg {
      display: flex;
      align-items: center;
      width: 100% !important;
      height: 100% !important;

      // 图片
      .sm-ico {
        margin-top: 0;
      }
      // 字
      .sm-txt {
        font-size: 16px !important;
        font-family: PingFangSC-Regular, PingFang SC !important;
        font-weight: 400 !important;
        color: rgba(255, 255, 255, 0.7);
      }

      .sm-btn-success .sm-txt {
        color: #01bf8f;
      }
    }
    /deep/#sm-btn-bg {
      background: #1e2020;
    }
    /deep/.rect-top,
    /deep/.rect-bottom {
      height: 50% !important;
    }
    /deep/.rect-bottom {
      top: 50% !important;
    }
  }

  @media screen and (max-width: 768px) {
    #NoCaptch {
      /deep/#SM_BTN_WRAPPER_1,
      /deep/#SM_BTN_1,
      /deep/#rectMask,
      /deep/#sm-btn-bg {
        .sm-txt {
          font-size: 30px !important;
          font-family: PingFangSC-Regular, PingFang SC !important;
          font-weight: 400 !important;
        }
      }
    }
  }
</style>
